<script setup lang="ts">
import dayjs from 'dayjs';
import { onMounted, ref, computed } from 'vue';
import { getAllMovieByCinema } from '../../../../api/movie';
import { getAvailableRoomsByCinema } from '../../../../api/room'
import { getScheduleByDate } from '../../../../api/schedule'
import timepick from './components/timepicker.vue'
import { ElMessage } from 'element-plus';

interface ITimeBlock {
    scheduleId?: number
    movieName: string
    movieDuring: number
    start: number
    end: number
    isChoose: boolean
    color: string
    formatTime?: string
    roomName?: string,
    roomType?: number,
}

interface IHotMovie {
    movieCover: string
    movieDesc: string
    movieId: number
    movieName: string
    movieScore: number
    movieScoreNum: number
    movieTypeId: number
    movieView: number
    movieDuring: number
}

interface IRoom {
    roomId: number
    cinemaId: number
    roomName: string
    roomContain: number
    roomType: number
    roomRow: number
    roomCol: number
    roomOpen: number
    createTime: string
}

const current = ref<Date>(new Date())
const room = ref<number>()
const movie = ref<number>()
const movieList = ref<IHotMovie[]>()
let movieFormatList = ref<IHotMovie[]>()
const roomList = ref<IRoom[]>()
let roomFormatList = ref<IRoom[]>()
const scheduleList = ref<ITimeBlock[]>()
const cinemaId = JSON.parse(window.sessionStorage.getItem("currentUser")!).unitId

let roomInfo = computed(() => {
    if (room) {
        return roomList.value?.find(item => {
            return item.roomId == room.value
        })
    } else {
        return null
    }
})

let movieInfo = computed(() => {
    if (movie) {
        return movieList.value?.find(item => {
            return item.movieId == movie.value
        })
    } else {
        return null
    }
})

// const accordingList = ref<ITimeBlock[]>([])
// const cityname = JSON.parse(window.sessionStorage.getItem("location")!).cityname
const currentDate = computed(() => {
    return dayjs(current.value).format('YYYY-MM-DD')
})

const HandleScheduleByDate = () => {
    // 获得排班信息
    console.log(currentDate.value,cinemaId)
    debugger
    getScheduleByDate({ date: currentDate.value, cinemaId:cinemaId }).then((res: any) => {
        
        if (res.code == 200) {
            scheduleList.value = res.data.map((item: ITimeBlock) => {
                return {
                    ...item,
                    color: '#ff0000',
                    movieDuring: item.movieDuring
                }
            })
            console.log("排班管理 -> 获得排班信息", scheduleList.value);
        } else {
            ElMessage.error("获取排班信息失败")
        }
    })
}

onMounted(() => {
    // 获得电影信息
    getAllMovieByCinema({ cinemaId: cinemaId }).then((res: any) => {
        if (res.code == 200) {
            movieList.value = res.data
            movieFormatList.value = res.data.map((item: any) => {
                return {
                    ...item,
                    movieName: `${item.movieId} -  ${item.movieName} :    ${item.movieView} 热度`
                }
            })
            console.log("排班管理 -> 获得电影信息", movieList.value);
        } else {
            ElMessage.error("获取电影信息失败")
        }
    })
    // 获取影厅信息
    getAvailableRoomsByCinema({ cinemaId: cinemaId }).then((res: any) => {
        if (res.code == 200) {
            roomList.value = res.data
            roomFormatList.value = res.data.map((item: any) => {
                return {
                    ...item,
                    roomName: `${item.roomName} - ${item.roomType == 1 ? '小' : item.roomType == 2 ? '中' : '大'} `
                }
            })
            console.log("排班管理 -> 获得影厅信息", roomList.value);
        } else {
            ElMessage.error("获取影厅信息失败")
        }
    })
    HandleScheduleByDate()
})

const disabledDate = (time: Date) => {
    //禁止选择今天以前的时间和七天以后的
    return time.getTime() - Date.now() > 6 * 24 * 60 * 60 * 1000 || time.getTime() - Date.now() <= (-1) * 24 * 60 * 60 * 1000;
}

</script>

<template>
    <div class="arrenge-time">
        <div class="flex-start-row" style="margin-bottom: 30px">
            <!-- 选择日期 -->
            <el-date-picker v-model="current" type="date" placeholder="Pick a day" size="large"
                :disabled-date="disabledDate" style="margin-right: 20px;" @change="HandleScheduleByDate" />
            <!-- 选择影厅 -->
            <el-select v-model="room" placeholder="请选择影厅" size="large" style="margin-right: 20px;">
                <el-option v-for="item in roomFormatList" :label="item.roomName" :value="item.roomId" />
            </el-select>
            <!-- 选择电影 -->
            <el-select v-model="movie" placeholder="请选择电影" size="large">
                <el-option v-for="item in movieFormatList" :label="item.movieName" :value="item.movieId" />
            </el-select>
        </div>
        <timepick :list="scheduleList!" :room-info="roomInfo" :movie-info="movieInfo" :current="currentDate" @getScheduleByDate="HandleScheduleByDate"></timepick>
    </div>
</template>

<style scoped lang="scss">

</style>
